<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/common/header::common-head">

    <!--<#include "../common/header.html">-->
</head>
<body>
    <!--边栏-->
    <!--<#include "../common/nav.html">-->

    <div th:replace="admin/common/nav::common-nav" ></div>
    <!--<link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.css" rel="stylesheet">-->
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script>

    <div class="content-wrapper" style="width: auto">
        <div class="container">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <div name="search" class="col-md-6 row-md-6">
                        <div class="input-group">
                            <select id="searchType" class="btn btn-primary" style="width: 150px;text-align: center;">
                                <option class="btn btn-primary" value="商品名称">商品名称</option>
                                <option class="btn btn-primary" value="商品编号">商品编号</option>
                            </select>
                            <input class="form-control" type="text" placeholder="Search for..." id="search">
                            <span class="input-group-btn">
                                    <button class="btn btn-primary" type="button" id="enterSearch" onclick="searchCategory()">
                                        <i class="fa fa-search"></i>
                                    </button>
                                 </span>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                    </div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>
                                    商品编号
                                </th>
                                <th>
                                    商品名称
                                </th>
                                <th>
                                    图片
                                </th>
                                <th>
                                    图片状态
                                </th>
                                <th>
                                    操作
                                </th>
                            </tr>
                        </thead>
                        <tbody th:each="product:${products}">
                         <tr class="success" th:each="img:${imgList }" th:if="${product}==${img.productId}and${img.imgStatus}==1">
                             <td th:text="${img.productId}" >
                             </td>
                             <td th:text="${img.productName}">
                             </td>
                             <td>
                                 <img th:src="@{/admin/jpg/{imgName}(imgName=${img.imgName})}" style="width: 100px; height: 100px">
                             </td>
                             <td th:text="${img.imgStatus==1?'主图片':'详情图片'}" >

                             </td>
                             <td >
                                 <button type="button" class="btn active"><a th:href="@{/img/add(img_id=${img.imgId},imgStatus='展示')}">添加展示图片</a></button>
                                 <button type="button" class="btn active"><a th:href="@{/img/add(img_id=${img.imgId},imgStatus='详情')}">添加详情图片</a></button>
                             </td>
                             <td>
                                 <button type="button" class="btn active"><a th:href="@{/img/delete(img_id=${img.imgId},product_id=${img.productId})}"  class="deleteimg">删除</a></button>
                             </td>
                         </tr>
                         <tr>
                             <td><input class="btn btn-primary" type="button" name="img-display" id="img-display" value="显示/隐藏详情图片" /></td>
                             <td></td>
                             <td></td>
                             <td></td>
                             <td></td>
                         </tr>
                         <tr th:class="${product}" style="display: none" th:each="img:${imgList}"  th:if="${product}==${img.productId}and${img.imgStatus}==0" th:id="${product}">
                             <td th:value="${product}"></td>
                             <td th:text="${img.productName}"></td>
                             <td>
                                 <img th:src="@{/admin/jpg/{imgName}(imgName=${img.imgName})}" style="width: 100px; height: 100px">
                             </td>
                             <td th:text="${img.imgStatus==1?'主图片':'详情图片'}"></td>
                             <td >
                                 <button type="button" class="btn active"><a th:href="@{/img/statu(img_id=${img.imgId})}">设置为主图片</a></button>
                                 <button type="button" class="btn active"><a th:href="@{/img/add(img_id=${img.imgId},imgStatus='展示')}">添加展示图片</a></button>
                                 <button type="button" class="btn active"><a th:href="@{/img/add(img_id=${img.imgId},imgStatus='详情')}">添加详情图片</a></button>

                             </td>
                             <td>
                                 <button type="button" class="btn active"><a th:href="@{/img/delete(img_id=${img.imgId},product_id=${img.productId})}"  class="deleteimg">删除</a></button>
                             </td>
                         </tr>
                         <tr th:class="${product}+'1'" style="display: none" th:each="img:${imgList}"  th:if="${product}==${img.productId}and${img.imgStatus==1}" th:id="${product}">
                             <td th:if="${img.imgStatus}!=0">没有详情图片</td>
                         </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>



        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script>
            $(document).ready(function () {

                $(".deleteimg").click(function () {
                    var message = "您确定要删除吗？";
                    if (confirm(message)==true){
                        return true;
                    }
                    return false;

                });
            });
        </script>
        <script>
            $("input[name=img-display]").click(function() {
                 $classify = $(this).parent().parent().next().attr("class");
               if ( $("."+$classify).css("display")=="none"){
                   $("."+$classify).show(500,null);
               }
               else{
                   $("."+$classify).hide();
               }
            });
        </script>
        <script>
            function searchCategory() {
                var serch = document.getElementById("search");
                if (document.getElementById("searchType").value=="商品名称"){
                    var url = "/fashionpress/img/selectByproductName/"+serch.value;
                    window.location.href=url;
                }
                if (document.getElementById("searchType").value=="商品编号"){
                    var url = "/fashionpress/img/selectByproductId/"+serch.value;
                    window.location.href=url;
                }
            }
        </script>
    </div>
    <div th:replace="admin/common/footer::common-footer"></div>
</body>
</html>